<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>供应商</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="60" >
                    <form-item label="名称:">
                        <i-input type="text" v-model="providerVo.proName" style="width: 145px"/>
                    </form-item>
                        <form-item label="地址:">
                            <i-input type="text" v-model="providerVo.proAddress"/>
                        </form-item>
                            <form-item label="联系人:" >
                                <i-input type="text" style="width: 90px"v-model="providerVo.proContact"/>
                            </form-item>
                                <form-item label="电话:">
                                    <i-input type="text"style="width: 90px" v-model="providerVo.proPhone"/>
                                </form-item>
                                  <!--  <form-item label="传真:">
                                        <i-input type="text"  style="width: 100px"v-model="providerVo.proFax"/>
                                    </form-item>-->
                    <i-button icon="ios-search" type="primary" style="margin-left:20px" @click="pageNo=1;searchProviderList();">搜索</i-button>
                    <i-button type="success"icon="md-sync" @click="providerVo={};searchProviderList();pageNo=1"></i-button>
                                </i-form>
            </p>
        </Panel>
    </Collapse>
    <card>
        <shiro:hasPermission name="gys:add">
            <i-button type="success" @click="toAdd"icon="md-add">添加供应商</i-button>
        </shiro:hasPermission>
    </card>

    <i-table :columns="myColumns" :data="pageResult.rows" :height="300" border stripe @on-selection-change="tableSelection=arguments[0]">
        <template slot-scope="{ row,index }"  slot="action">
            <shiro:hasPermission name="gys:update">
                <i-button type="warning" @click="toUpdate(row)">修 改</i-button>
            </shiro:hasPermission>
            <shiro:hasPermission name="gys:del">
                <i-button type="error" @click="del(row,index)">删 除</i-button>
            </shiro:hasPermission>
        </template>

    </i-table>

    <modal v-model="updateFlag" title="修改供应商" @on-ok="update">
        <i-form :label-width="80" style="padding: 30px" >
            <form-item label="供应商编码">
                <i-input v-model="provider.proCode" size="large"/>
            </form-item>
            <form-item label="供应商名称">
                <i-input v-model="provider.proName" size="large"/>
            </form-item>
            <form-item label="供应商详细描述">
                <i-input v-model="provider.proDesc" size="large"/>
            </form-item>
            <form-item label="供应商联系人">
                <i-input v-model="provider.proContact" size="large"/>
            </form-item>
            <form-item label="联系电话">
                <i-input v-model="provider.proPhone" size="large"/>
            </form-item>
            <form-item label="地址">
                <i-input v-model="provider.proAddress" size="large"/>
            </form-item>
        </i-form>
    </modal>
    <modal v-model="addFlag" title="添加供应商">
        <i-form ref="provider" :model="provider" :label-width="80" style="padding: 30px" :rules="ruleValidate" >
               <form-item label="供应商编码" prop="proCode">
            <i-input v-model="provider.proCode" size="large"/>
        </form-item>
            <form-item label="供应商名称" prop="proName">
                <i-input v-model="provider.proName" size="large"/>
            </form-item>
            <form-item label="供应商详细描述" prop="proDesc">
                <i-input v-model="provider.proDesc" size="large"/>
            </form-item>
            <form-item label="供应商联系人" prop="proContact">
                <i-input v-model="provider.proContact" size="large"/>
            </form-item>
            <form-item label="联系电话" prop="proPhone">
                <i-input v-model="provider.proPhone" size="large"/>
            </form-item>
            <form-item label="地址" prop="proAddress">
                <i-input v-model="provider.proAddress" size="large"/>
            </form-item>
            <i-button  type="primary" @click="add('provider')" style="margin-left: 300px">提交</i-button>
            <i-button  type="error" @click="cancleSubmit('provider')">取消</i-button>
        </i-form>
        <div slot="footer"></div>
    </modal>
    <Page :total="pageResult.total"
          :page-size="pageSize"
    <%-- :current.sync="pageNo"--%>
          @on-change="pageNo=arguments[0];searchProviderList();"
    <%-- @on-change="searchUserList"--%>
          show-sizer
          :page-size-opts="[5,10,15]"
    <%-- @on-page-size-change="changPageSize"--%>
          @on-page-size-change="pageSize=arguments[0];searchProviderList();"
    />
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            myColumns:[
                //{type:"selection",width:60,align:"center"},
                {title:"供应商编码",key:"proCode",align:"center"},
                {title:"供应商名称",key: "proName",align:"center"},
                {title:"供应商详细描述",key: "proDesc",align:"center"},
                {title:"供应商联系人",key: "proContact",align:"center"},
                {title:"联系电话",key: "proPhone",align:"center"},
                {title:"地址",key: "proAddress",align:"center"},
                {title:"操作",slot:"action",align:"center"},
            ],
            pageResult:{
                rows:[],
                total:50,
            },
            myData:[],
            provider:{},
            pageNo:1,
            pageSize:5,
            providerVo:{},
            tableSelection:[],
            updateFlag:false,
            addFlag:false,
            ruleValidate: {
                proCode: [
                    {required: true, message: '请输入供应商编码', trigger: 'blur'}
                ],
                proName: [
                    {required: true, message: '请输入供应商名称', trigger: 'blur'}
                ],
                proDesc: [
                    {required: true, message: '请输入详细描述',trigger: 'blur'}],
                proPhone: [
                    {required: true, message: '请输入联系电话',trigger: 'blur'},
                    { type: 'number', message: '请输入正确的电话号码', trigger: 'blur',transform:(value) => Number(value)}],
                proContact: [
                    {required: true, message: '请输入联系人',trigger: 'blur'}],
                proAddress: [
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
            },

        },
        mounted(){
            this.searchProviderList();
        },
        methods:{
            searchProviderList(){
                axios.get(`${ctx}/jibenxinxi/gys/search/${this.pageNo}/${this.pageSize}`,{params:this.providerVo})
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },
           /* search(){
                axios.get(`${ctx}/jibenxinxi/gys/list`)
                    .then(({data})=>{
                        this.myData=data.result;
                    });
            },*/
            toUpdate(row){
                //this.role=row;
                Object.assign(this.provider,row);
                this.updateFlag=true;
            },
            update(){
                if(this.provider.proPhone.length!=11){
                    return this.$Message.error('修改失败!电话号码必须为11位');
                }
                axios.post(`${ctx}/jibenxinxi/gys/update`,this.provider)
                    .then(({data})=>{
                        this.updateFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.searchProviderList();
                    });
            },
            del(row,index){
                let _this=this;
                let flag= iview.Modal.confirm({
                    title:"您确实要删除么？",
                    content:"该操作不可逆，请谨慎操作。",
                    onOk(){
                        axios.get(`${ctx}/jibenxinxi/gys/del?id=${row.id}`)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg});
                                //_this.search();
                                _this.pageResult.rows.splice(index,1);
                            });
                    }
                });
            },
            toAdd(){
                this.provider ={};
                this.addFlag=true;
            },
            add(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.provider.proPhone.length!=11){
                            return this.$Message.error('添加失败!电话号码必须为11位');
                        }
                axios.post(`${ctx}/jibenxinxi/gys/add`,this.provider)
                    .then(({data})=>{
                        this.addFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.searchProviderList();
                    });
                    }else {
                        this.$Message.error('添加失败!');
                    }
                })
            },
            cancleSubmit(name){
                this.$refs[name].resetFields();
                this.addFlag=false;
            }
        },

    })
</script>
</body>
</html>
